.cgjoy--works {
  display: flex;
  flex-wrap: wrap;
  margin: -15px;

  .cgjoy--works-item {
    width: 16.6666%;
    padding: 15px;
    @media screen and (max-width: 9900px) {
      & {
        width: 20%;

        &:nth-child(1n + 16) {
          display: none;
        }
      }
    }
    @media screen and (max-width: 1280px) {
      & {
        width: 25%;

        &:nth-child(1n + 13) {
          display: none;
        }
      }
    }
  }
}
.xuehao {
  padding-right: 10px;
  span {
    padding: 2px 6px;
    color: #fff;
    background: #1d595b;
    border-radius: 5px;
  }
}

.deleteModal {
  :global {
    .ant-modal-content {
      width: 400px;
      height: 307px;
      background: #ffffff;
      border-radius: 14px;
    }

    .ant-modal-close-x {
      display: none;
      color: #fff;
    }

    .ant-modal-body {
      padding: 30px 20px 20px 20px;
    }
    .ant-form-item-label > label {
      color: #fff;
    }
  }
  .title {
    height: 25px;
    margin-bottom: 16px;
    color: #000000;
    font-weight: 600;
    font-size: 18px;
    line-height: 25px;
    text-align: center;
  }
  .textarea {
    height: 160px;
    padding: 10px;
    font-size: 14px;
    background: #f3f3f3 !important;
    border: none !important;
    border-radius: 12px;
    border-radius: 6px;
    resize: none;

    &:focus,
    &:hover {
      border: none !important;
      box-shadow: none !important;
    }
  }

  .footer {
    display: flex;
    align-items: center;
    margin-top: 16px;

    .btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 88px;
      height: 40px;
      margin-right: 17px;
      color: #fff;
      background: #e7314a;
      border-radius: 10px;
      cursor: pointer;
      &:hover {
        opacity: 0.9;
      }

      &:last-child {
        margin-right: 0;
      }
    }

    .cancel {
      width: 88px;
      height: 40px;
      background: #aaa9bf;
      border-radius: 10px;
    }
  }
}

.deleteModal2 {
  :global {
    .ant-modal-content {
      width: 253px;
      height: 187px;
      background: #ffffff;
      border-radius: 14px;
    }

    .ant-modal-close-x {
      display: none;
      color: #fff;
    }

    .ant-modal-body {
      padding: 30px 20px 20px 20px;
    }
    .ant-form-item-label > label {
      color: #fff;
    }
  }
  .title {
    height: 25px;
    margin-bottom: 16px;
    color: #000000;
    font-weight: 600;
    font-size: 18px;
    line-height: 25px;
    text-align: center;
  }
  .tips {
    height: 22px;
    margin-bottom: 24px;
    color: #000000;
    font-size: 16px;
    line-height: 22px;
    text-align: center;
    opacity: 0.5;
  }

  .footer {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 16px;

    .btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 88px;
      height: 40px;
      margin-right: 17px;
      color: #fff;
      background: #e7314a;
      border-radius: 10px;
      cursor: pointer;
      &:hover {
        opacity: 0.9;
      }

      &:last-child {
        margin-right: 0;
      }
    }

    .cancel {
      width: 88px;
      height: 40px;
      background: #aaa9bf;
      border-radius: 10px;
    }
  }
}

:global {
  .cgjoy--works {
    // // ie11 兼容
    // display: -ms-grid;
    // -ms-grid-columns: ~"(1fr)[5]";
    // // 正常的
    // display: grid;
    // grid-template-columns: repeat(5, 1fr);
    // grid-gap: 20px;

    &-item {
      &.hasWorkTitle {
        padding-bottom: 10px;
        overflow: hidden;
        background: #25375c;
        border-radius: 8px;
        .cgjoy--works-item-des {
          padding: 0 12px;
        }
        .cgjoy--works-item-content {
          border-radius: 0;
        }
      }
      &-ratio {
        position: relative;
        padding-top: 56.32%;
      }
      .cgjoy--works-item-img {
        object-fit: cover;
        transition: transform 0.4s;
      }
      &:hover {
        .cgjoy--works-item-mask {
          display: flex;
        }
        .cgjoy--works-item-admin-action {
          display: flex;
        }
        .cgjoy--works-item-img {
          transform: scale(1.1);
        }
      }
      &-content {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        border-radius: 8px;

        &:hover {
          .cgjoy--works-item-pigai {
            display: flex;
          }
        }
      }

      &-score {
        position: absolute;
        top: 8px;
        right: 8px;
        width: 20px;
        height: 22px;
      }

      &-img {
        width: 100%;
        height: 100%;
        transition: all 0.2s;
      }

      &-pigai {
        position: absolute;
        top: 50%;
        left: 50%;
        display: none;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 62px;
        height: 62px;
        color: #fff;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.4);
        border-radius: 10px;
        transform: translateX(-50%) translateY(-50%);
        cursor: pointer;

        &:hover {
          background-color: #254df8;
        }

        &_icon {
          width: 24px;
          height: 24px;
          margin-bottom: 2px;
          background: url('./icon-pg.png') no-repeat center / 100% 100%;
        }
      }

      &-mask {
        position: absolute;
        top: 0;
        left: 0;
        display: none;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.7);
      }

      &-icon_play {
        width: 50px;
        height: 50px;
        background: url('./icon-play.png') no-repeat center / 100%;
      }

      &-des {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 12px;
        color: #fff;
        font-size: 12px;
        line-height: 20px;
        &.hasWorkTitle {
          padding: 0 12px;
        }

        &_left {
          display: flex;
          align-items: center;
          min-width: 100px;
        }
      }
      &-work-title {
        padding: 0 12px;
        .text {
          padding: 12px 0;
          overflow: hidden;
          color: #ffffff;
          font-size: 16px;
          line-height: 22px;
          white-space: nowrap;
          text-overflow: ellipsis;
          border-bottom: 1px solid #314265;
          cursor: pointer;
          &:hover {
            opacity: 0.9;
          }
        }
      }

      &-avatar {
        width: 18px;
        height: 18px;
        margin-right: 6px;
        margin-left: 14px;
        background-position: center;
        background-size: cover;
        border-radius: 50%;
        cursor: pointer;
      }

      &-nick {
        flex: 1;
        overflow: hidden;
        color: #ffffff;
        white-space: nowrap;
        text-overflow: ellipsis;
        cursor: pointer;
        &:hover {
          color: #254df8;
        }
      }
      &-title-new {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        cursor: pointer;
        &-text {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        &-classnamehover:hover {
          color: rgba(37, 77, 248, 1);
          .cgjoy--works-item-title-new-arrow {
            background: url('./arrow-new-213-hover.png') no-repeat center / 100%;
          }
        }
        &-arrow {
          width: 11px;
          min-width: 11px;
          height: 11px;
          margin-left: 4px;
          background: url('./arrow-new-213.png') no-repeat center / 100%;
        }
      }
      &-title {
        flex: 1;
        width: 0;
        margin-left: 8px;
        overflow: hidden;
        color: rgba(255, 255, 255, 0.3);
        white-space: nowrap;
        text-align: right;
        text-overflow: ellipsis;

        &_hover {
          cursor: pointer;
          &:hover {
            color: #fff;
          }
        }
      }
    }
  }

  .cgjoy--works-item-admin-action {
    position: absolute;
    bottom: 6px;
    left: 0;
    display: none;
    width: 100%;
    padding: 0 6px;
    .cgjoy--works-item-admin-action-edit,
    .cgjoy--works-item-admin-action-del {
      display: flex;
      flex: 1;
      align-items: center;
      justify-content: center;
      height: 38px;
      margin-right: 6px;
      color: #ffffff;
      font-weight: 400;
      font-size: 13px;
      background: rgba(255, 255, 255, 0);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 6px;
      backdrop-filter: blur(10px);
      &:hover {
        background: rgba(255, 255, 255, 0.3);
      }
      &:last-child {
        margin-right: 0;
      }
    }
  }

  // @media screen and (max-width: 1280px) {
  //   .cgjoy--works {
  //     grid-template-columns: repeat(4, 1fr);
  //     -ms-grid-columns: ~"(1fr)[4]";

  //     &-item:nth-of-type(5n) {
  //       display: none;
  //     }
  //   }
  // }

  /***** ie11 兼容 ****/

  // grid-gap 用 marign 替换
  // @media all and (-ms-high-contrast: none) {
  //   .cgjoy--works-item {
  //     margin: 10px;
  //   }
  // }

  // @media all and (-ms-high-contrast: none) and (max-width: 1280px) {
  //   .cgjoy--works {
  //     // &-item:nth-of-type(1n + 13) {
  //     //   display: block;
  //     // }

  //     // &-item:nth-of-type(7n) {
  //     //   display: none;
  //     // }
  //   }

  // }
}

.scale {
  transition: transform 0.4s;

  &:hover {
    transform: scale(1.1);
    transform-origin: center center;
  }
}

// 个人详情
.cgjoy--works-item-person {
  :global {
    .ant-popover-title {
      display: none;
    }

    .ant-popover-inner {
      width: 364px;
      padding: 16px;
      background: #2f5083;
      border: 1px solid #657ba9;
      border-radius: 8px;
      box-shadow: 0 10px 35px 0 rgba(12, 29, 64, 0.53);
    }

    .ant-popover-inner-content {
      padding: 0;
    }

    .ant-popover-arrow-content {
      background-color: #657ba9;
    }
  }

  .header {
    display: flex;
    align-items: center;

    .avatar {
      min-width: 46px;
      height: 46px;
      margin-right: 8px;
      background-position: center;
      background-size: cover;
      border-radius: 50%;
    }

    .right {
      .nick {
        color: #fff;
        font-weight: 600;
        line-height: 20px;
        text-shadow: 0 3px 20px #0a4167;
      }

      .message {
        width: 274px;
        overflow: hidden;
        color: #7688a5;
        font-size: 14px;
        line-height: 20px;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }

  .main {
    .list {
      margin-top: 12px;
      overflow: hidden;

      .item {
        display: flex;
        flex-direction: column;
        justify-content: end;
        float: left;
        width: 104px;
        height: 79px;
        margin: 0 8px 8px 0;
        background-position: center;
        background-size: cover;
        border-radius: 4px;

        &:nth-child(3n) {
          margin-right: 0;
        }

        .footer {
          display: flex;
          align-items: center;
          padding: 6px 4px;

          .icon {
            width: 13px;
            height: 13px;
            margin-right: 2px;
          }

          .num {
            height: 17px;
            color: #fff;
            font-weight: 400;
            font-size: 12px;
            line-height: 17px;
          }
        }
      }
    }
  }
}

// 我喜欢的课程的小的item
.cgjoy--works-item-small {
  position: relative;
  width: 135px;
  height: 102px;
  border: 1px solid transparent;
  cursor: pointer;
  &.video:hover {
    background-color: red;
    .video {
      display: flex;
    }
  }
  &:hover {
    border: 1px solid #ff9b0e;
    // .hoverborder {
    //   display: block;
    // }
  }

  .video {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);

    .icon_play {
      width: 33px;
      height: 33px;
      background: url('../../../../assets/pc/images/index/play.png') no-repeat center / 100%;
    }

    &:hover {
      .icon_play {
        background-image: url('../../../../assets/pc/images/index/play_hover.png');
      }
    }
  }

  .img {
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
    transition: all 1.5s;
  }

  .star {
    position: absolute;
    bottom: 7px;
    left: 8px;
    display: flex;
    align-items: center;
    color: #fff;
    font-size: 12px;
    line-height: 17px;

    .icon {
      width: 12px;
      height: 12px;
      margin-right: 5px;
    }
  }

  .hoverborder {
    position: absolute;
    top: -1px;
    left: -1px;
    display: none;
    width: 137px;
    height: 104px;
    border: 2px solid #ff9b0e;
  }
}

.content {
  cursor: pointer;
}

:global {
  @media screen and (max-width: 1439px) {
    .cgjoy--works-item {
      .cgjoy--works-item-nick,
      .cgjoy--works-item-title {
        font-size: 12px;
      }
    }
  }
}
